<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html lang="en">
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
        <title>Pickup Map</title>
        <!-- Framework CSS -->
        <link rel="stylesheet" href="css/screen_100.css" type="text/css" media="screen, projection">
        <link rel="stylesheet" href="css/print_100.css" type="text/css" media="print">
        <!--[if lt IE 8]><link rel="stylesheet" href="../../blueprint/ie.css" type="text/css" media="screen, projection"><![endif]-->
        <style type="text/css">
            #footer {
            }
            
            img.iconClass {
                width: 40px;
                height: 40px;
                vertical-align: middle
            }
            
            html {
                height: 100%
            }
            
            body {
                height: 100%;
                margin: 0px;
                padding: 0px;
                /*background: url("images/street4.jpg") no-repeat scroll left top;*/
				background: #B0C4DE;
                
            }
            
            ol, ul {
                list-style: none outside none
            }
            
            .content-container {
                width: 100%;
                position: relative
            }
            
            .map-section {
                width: 100%;
                height: 400px;
				
            }
            
            .float {
                float: left
            }
            
            .filter-container {
                width: 200px;
                margin-right: 5px
            }
            
            .clearfix {
                display: block
            }
            
            #map_canvas {
                height: 90%
            }
			.outline{
				border:solid 2px #000000;
				-moz-border-radius:2px;
				border-radius:5px;
				background:#F0F8FF;
			}
			.container{
				padding:10px;
			}
			.dropList{
				width:145px;
				
			}
			.resizeLogo{
				height:50px;
				width:auto;
			}
			#event-details{
				
			}
        </style>
        <script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=true">
        </script>
        <script type='text/javascript' src='https://ajax.googleapis.com/ajax/libs/jquery/1.5.1/jquery.js'>
        </script>
        <script type="text/javascript" src="maps.js">
        </script>
    </head>
    <body onload="initialize()">
        <div style="background:#778899; height:50px;">
            <img src="./images/logo.png" class="resizeLogo" style="padding:0 0 0 16%;">
            </img>
        </div>
        <div class="container">
            <div class="span-100 outline push-2">
                <div class="span-17">
                    <h2 style="margin:10px 0px 0px 15px;">Sports</h2>
                    <div class="filter-options">
                        <ul id="filterControl">
                            <li class="menu-item clearfix">
                                <label class="item-text bball float" for="bballRadio">
                                    <input id="bballRadio" onClick="processFilter(this)" type="checkbox" checked="checked" value="bball"><img class="iconClass" src="./images/bball court.png"/>Basketball
                                </label>
                            </li>
                            <li class="menu-item clearfix">
                                <label class="item-text baseball float" for="baseballRadio">
                                    <input id="baseballRadio" onClick="processFilter(this)" type="checkbox" checked="checked" value="baseball"><img class="iconClass" src="./images/baseball.png"/>Baseball
                                </label>
                            </li>
                            <li class="menu-item clearfix">
                                <label class="item-text field float" for="fieldRadio">
                                    <input id="fieldRadio" onClick="processFilter(this)" type="checkbox" checked="checked" value="field"><img class="iconClass" src="./images/field.png"/>Field
                                </label>
                            </li>
                        </ul>
                    </div>
                </div>
                <div class="span-65" style="padding:10px;">
                    <div class="float map-section">
                        <div>
                           <input id="address" type="textbox" value="84 Beacon Street, Boston, MA" size="50">
                           <input type="button" value="Search Map" onclick="codeAddress()">
                        </div>
                        <div id="map_canvas">
                        </div>
                    </div>
                </div>
                <div class="span-15 last" style="padding-top:10px;">
                    <div id="event-details">
                    </div>
                </div>
            </div>
			<div class="span-24">
                <div class="prepend-top push-70 span-20 last">
                    <a href="#" class="quiet">About Us</a>
                    |<a href="#" class="quiet">FAQ</a>
                    |<a href="#" class="quiet">Contact Us</a>
                </div>
            </div>
        </div>
        <div id="footer">
            
        </div>
    </body>
</html>
